<script setup>
// import { onMounted } from 'vue'
import { ref } from 'vue'

// onMounted(() => {
//   console.log(tableData.value)
// })
const tableData = ref([
  {
    o01: '1',
    o02: '设备1',
    o03: '100',
    o04: '150v',
    o05: '1500',
    o06: '888',
    o07: '1800',
    o09: new Date('2024-08-10').toLocaleDateString().replace(/\//g, '-')
  },
  {
    o01: '2',
    o02: '设备2',
    o03: '200',
    o04: '250v',
    o05: '2500',
    o06: '666',
    o07: '1900',
    o09: new Date('2022-08-10').toLocaleDateString().replace(/\//g, '-')
  }
])
// 将本地存储的数据赋值给tableData

tableData.value = JSON.parse(localStorage.getItem('tableData'))._value
// 删除功能
const clickRemove = (item) => {
  // console.log(item)
  // 调用接口 根据id删除数据  传入id
  // 将本地数据删除

  // tableData.values = tableData.values.filter((value) => value.o01 !== item.o01)
  // 提示消息
  ElMessage.error('删除成功')
  tableData.value = tableData.value.filter((value) => value.o01 !== item.o01)
  localStorage.setItem('tableData', JSON.stringify(tableData))
  // 重新渲染数据
}

// 修改弹出的对话框
const dialogVisible = ref(false)
const ruleFormRef = ref()
const ruleForm = ref({
  o01: '',
  o02: '',
  o03: '',
  o04: '',
  o05: '',
  o06: '',
  o07: '',
  o09: '',
  text: ''
})

let currentID = ''
// 点击修改按钮
const changeDate = (item) => {
  // console.log(item)
  currentID = item.o01 - 1
  dialogVisible.value = true
  // 回显数据
  ruleForm.value = {
    o01: item.o01,
    o02: item.o02,
    o03: item.o03,
    o04: item.o04,
    o05: item.o05,
    o06: item.o06,
    o07: item.o07,
    o09: item.o09,

    text: ''
  }
}
// 点击确认进行自定义校验
const handleRequired = () => {
  ruleFormRef.value.validate((isOk) => {
    if (isOk) {
      // 调用接口
      // 把输入的数据传给tableData
      // console.log(tableData[currentID].o04)
      const datas = ruleForm.value.o09
      const datass = new Date(datas)
      const datassYear = datass.getFullYear()
      const datassMonth = datass.getMonth() + 1
      const datassD = datass.getDate()
      // console.log(datassYear, datassMonth)
      tableData.value[currentID].o02 = ruleForm.value.o02
      tableData.value[currentID].o03 = ruleForm.value.o03
      tableData.value[currentID].o04 = ruleForm.value.o04
      tableData.value[currentID].o05 = ruleForm.value.o05
      tableData.value[currentID].o06 = ruleForm.value.o06
      tableData.value[currentID].o07 = ruleForm.value.o07
      tableData.value[currentID].o09 = `${datassYear}-${datassMonth}-${datassD}`

      // 提示消息
      ElMessage.success('修改成功')
      // 把修改的内容重新渲染重新赋值

      // 关闭弹框
      dialogVisible.value = false
    } else {
      // 提示消息
      ElMessage.error('请输入完成信息')
    }
  })
}

// 点击取消按钮
const handleCancel = () => {
  // 重置表单
  ruleFormRef.value.resetFields()
  ruleForm.value = {
    o02: '',
    o03: '',
    o04: '',
    o05: '',
    o06: '',
    o07: '',
    o09: ''
  }

  // 关闭弹框
  dialogVisible.value = false
}

// 添加板块
const addVisible = ref(false)
const handleAddbtn = () => {
  addVisible.value = true
}

const addFormRef = ref()
const addForm = ref({
  o01: '',
  o02: '',
  o03: '',
  o04: '',
  o05: '',
  o06: '',
  o07: '',
  o09: '',
  text: ''
})
const addRules = {
  o02: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
  o03: [{ required: true, message: '请输入已产数量', trigger: 'blur' }],
  o04: [{ required: true, message: '请输入单位耗电量', trigger: 'blur' }],
  o05: [{ required: true, message: '请输入总耗电量', trigger: 'blur' }],
  o06: [{ required: true, message: '请输入单位碳排放量', trigger: 'blur' }],
  o07: [{ required: true, message: '请输入总碳排放', trigger: 'blur' }],
  o09: [{ required: true, message: '请输入产生日期', trigger: 'blur' }]
}

// 点击添加确认按钮
const addBtn = () => {
  addFormRef.value.validate((isOk) => {
    if (isOk) {
      // 将传入的时间格式化
      const dataString = addForm.value.o09
      const newDataStirng = new Date(dataString)
      const YearData = newDataStirng.getFullYear()
      const MonthData = newDataStirng.getMonth() + 1
      const DayData = newDataStirng.getDate()
      // console.log(YearData)

      // 调用接口
      // 把输入的数据添加给tableData
      console.log(addForm.value.o09)
      tableData.value.push({
        o01: tableData.value.length + 1,
        o02: addForm.value.o02,
        o03: addForm.value.o03,
        o04: addForm.value.o04,
        o05: addForm.value.o05,
        o06: addForm.value.o06,
        o07: addForm.value.o07,
        o09: `${YearData}-${MonthData}-${DayData}`
      })
      // 将push后的数据进行本地储存
      localStorage.setItem('tableData', JSON.stringify(tableData))
      // 提示消息
      // console.log(addForm.value)
      ElMessage.success('添加成功')
      // 关闭弹框+重置表单
      addCancelbtn()
    }
  })
}

const addCancelbtn = () => {
  // 重置表单
  addFormRef.value.resetFields()
  addForm.value = {
    o01: '',
    o02: '',
    o03: '',
    o04: '',
    o05: '',
    o06: '',
    o07: '',
    o09: '',
    text: ''
  }
  // 关闭弹框
  addVisible.value = false
}

// 搜索功能板块
const searchValue = ref({
  o02: '', //流水号
  o04: '', //完工单号
  o03: '', //计划编号
  o05: '', //作业名称
  o08: '', //产品名称
  o07: '', //检验批次
  o09: '', //生产日期
  o10: '', //检验项
  o16: '', //检验结果
  o17: '', //检验人
  o18: '' //检验时间
})

// 进行相关搜索
const searchData = () => {
  const filteredData = tableData.value.filter((item) => {
    const searchValues = searchValue.value

    // Check each condition only if the search value is provided
    const o02 = !searchValues.o02 || item.o02.includes(searchValues.o02)

    // const o09 = !searchValues.o09 || item.o09.includes(searchValues.o09)
    // 进行日期判断
    let o09 = true
    // 把时间戳转化为日期格式
    const [start, end] = searchValues.o09
    const starts = new Date(start)
    const startsYear = starts.getFullYear()
    const startsMonth = starts.getMonth() + 1
    const startsDay = starts.getDate()
    const ends = new Date(end)
    const endsYear = ends.getFullYear()
    const endsMonth = ends.getMonth() + 1
    const endsDay = ends.getDate()
    const newStart = `${startsYear}-${startsMonth}-${startsDay}`
    const newEnd = `${endsYear}-${endsMonth}-${endsDay}`
    // console.log(newStart, newEnd, item.o09)
    // const itemDate = new Date(item.o09)
    // console.log(itemDate)
    // 判断时间是否在范围内
    if (start && end) {
      o09 = item.o09 >= newStart && item.o09 <= newEnd
    }

    // console.log(o09)
    // Combine all conditions using && to filter the data
    return o02 && o09
  })

  tableData.value = filteredData
}

// 重置搜索
// 绑定原始数组响应式
const tableDataall = ref([...tableData.value])
const resetSearch = () => {
  searchValue.value = {
    o02: '', //流水号
    o04: '', //完工单号
    o03: '', //计划编号
    o05: '', //作业名称
    o08: '', //产品名称
    o07: '', //检验批次
    o09: '', //生产日期
    o10: '', //检验项
    o16: '', //检验结果
    o17: '', //检验人
    o18: '' //检验时间
  }
  tableData.value = [...tableDataall.value]
}

// 日期选择
</script>

<template>
  <div>
    <!-- 添加 -->
    <el-button type="primary" style="margin-bottom: 20px" @click="handleAddbtn"
      >添加</el-button
    >
    <!-- 点击添加弹出的对话框 -->
    <el-dialog
      v-model="addVisible"
      title="添加生产采样单"
      width="500"
      @close="addCancelbtn"
    >
      <el-form
        ref="addFormRef"
        style="max-width: 600px"
        :model="addForm"
        status-icon
        :rules="addRules"
        label-width="auto"
        class="demo-ruleForm"
      >
        <el-form-item label="设备名称" prop="o02">
          <el-input
            v-model="addForm.o02"
            placeholder="请输入设备名称"
            style="width: 80%; margin-right: 10px"
          ></el-input>
        </el-form-item>
        <el-form-item label="已产数量" prop="o03">
          <el-input
            v-model="addForm.o03"
            placeholder="请输入已产数量"
            style="width: 80%; margin-right: 10px"
          ></el-input>

          <!-- 弹框 -->
        </el-form-item>
        <el-form-item label="单位耗电量" prop="o04">
          <el-input v-model="addForm.o04" placeholder="请输入单位耗电量" />
        </el-form-item>
        <el-form-item label="总耗电量" prop="o05">
          <el-input v-model="addForm.o05" placeholder="请输入总耗电量" />
        </el-form-item>
        <el-form-item label="单位碳排放量" prop="o06">
          <el-input v-model="addForm.o06" placeholder="请输入单位碳排放量" />
        </el-form-item>
        <el-form-item label="总碳排放" prop="o07">
          <el-input v-model="addForm.o07" placeholder="请输入总碳排放" />
        </el-form-item>
        <el-form-item label="产生日期" prop="o09">
          <el-date-picker
            v-model="addForm.o09"
            type="date"
            placeholder="请输入产生日期"
            :size="size"
          />
        </el-form-item>
        <el-form-item label="备注" prop="text">
          <el-input
            v-model="addForm.text"
            type="textarea"
            placeholder="在这里输入备注"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="addBtn"> 确认 </el-button>
          <el-button @click="addCancelbtn">取消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 搜索框 -->
    <el-row type="flex" justify="start">
      <el-col :span="1" style="margin-right: 5px; margin-top: 3px">
        设备名称
      </el-col>
      <el-col :span="3">
        <el-input v-model="searchValue.o02" placeholder="请输入设备名称" />
      </el-col>
      <el-col
        :span="1"
        style="margin-right: 5px; margin-top: 3px; margin-left: 5px"
      >
        创建时间
      </el-col>
      <el-col :span="3">
        <el-date-picker
          v-model="searchValue.o09"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 100%"
        />
      </el-col>
      <el-col :span="3" style="margin-left: 40px">
        <el-button @click="searchData" type="primary" size="mini"
          ><el-icon><Search /></el-icon>搜索</el-button
        >
        <el-button @click="resetSearch" type="info" size="mini"
          ><el-icon><Refresh /></el-icon>重置</el-button
        >
      </el-col>
    </el-row>
    <el-row type="flex" justify="start" style="margin-top: 12px">
      <el-col>
        <el-button type="warning"
          ><el-icon><Download /></el-icon>导出</el-button
        >
      </el-col>
    </el-row>
    <!-- 检验结果合格和不合格 -->

    <el-table stripe :data="tableData" style="width: 100%">
      <el-table-column prop="o01" label="编号"> </el-table-column>
      <el-table-column prop="o02" label="设备名称"> </el-table-column>
      <el-table-column prop="o03" label="已产数量"> </el-table-column>

      <el-table-column prop="o04" label="单位耗电量"> </el-table-column>
      <el-table-column prop="o05" label="总耗电量"> </el-table-column>
      <el-table-column prop="o06" label="单位碳排放量"> </el-table-column>
      <el-table-column prop="o07" label="总碳排放"> </el-table-column>
      <el-table-column prop="o09" label="产生日期"> </el-table-column>

      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary" @click="changeDate(row)">修改</el-button>
          <el-popconfirm
            title="你确定要删除这条数据吗?"
            @confirm="clickRemove(row)"
            confirm-button-text="确定"
            cancel-button-text="取消"
            confirm-type="warining"
            concel-button-type="info"
          >
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-row type="flex" justify="end">
    <el-col :span="14">
      <el-pagination layout="prev, pager, next" :total="50"
    /></el-col>
  </el-row>

  <!-- 点击修改按钮弹出的对话款 -->
  <el-dialog
    v-model="dialogVisible"
    title="修改产品校验单"
    width="500"
    @close="handleCancel"
  >
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      status-icon
      :rules="addRules"
      label-width="auto"
      class="demo-ruleForm"
    >
      <el-form-item label="设备名称" prop="o02">
        <el-input
          v-model="ruleForm.o02"
          placeholder="请输入设备名称"
          style="width: 80%; margin-right: 10px"
        ></el-input>
      </el-form-item>
      <el-form-item label="已产数量" prop="o03">
        <el-input
          v-model="ruleForm.o03"
          placeholder="请输入已产数量"
          style="width: 80%; margin-right: 10px"
        ></el-input>

        <!-- 弹框 -->
      </el-form-item>
      <el-form-item label="单位耗电量" prop="o04">
        <el-input v-model="ruleForm.o04" placeholder="请输入单位耗电量" />
      </el-form-item>
      <el-form-item label="总耗电量" prop="o05">
        <el-input v-model="ruleForm.o05" placeholder="请输入总耗电量" />
      </el-form-item>
      <el-form-item label="单位碳排放量" prop="o06">
        <el-input v-model="ruleForm.o06" placeholder="请输入单位碳排放量" />
      </el-form-item>
      <el-form-item label="总碳排放" prop="o07">
        <el-input v-model="ruleForm.o07" placeholder="请输入总碳排放" />
      </el-form-item>
      <el-form-item label="产生日期" prop="o09">
        <el-date-picker
          v-model="ruleForm.o09"
          type="date"
          placeholder="请输入产生日期"
          :size="size"
        />
      </el-form-item>
      <el-form-item label="备注" prop="text">
        <el-input
          v-model="ruleForm.text"
          type="textarea"
          placeholder="在这里输入备注"
        />
      </el-form-item>
    </el-form>
    <template #footer="{ row }">
      <div class="dialog-footer">
        <el-button type="primary" @click="handleRequired(row)">
          确认
        </el-button>
        <el-button @click="handleCancel">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
// :deep(*) {
//   background: url(../../assets/login_bg.jpg) no-repeat;
// }
</style>
